<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>微博</title>
    <link href="style/weibo.css" rel="stylesheet" type="text/css"/>
    <script src="./lib/axios.min.js"></script>
</head>

<body>
<div class="jyArea">
    <div class="takeComment">
        <textarea name="textarea" class="takeTextField" id="tijiaoText"></textarea>
        <div class="takeSbmComment">
            <input type="button" class="inputs" value=""/>
        </div>
    </div>


    <div class="commentOn">

    </div>
</div>
</body>
<script>
    const contextArea = document.querySelector("#tijiaoText");
    axios.defaults.baseURL = "http://zhangpeiyue.com";
	axios.interceptors.response.use(response=>{
		if(response.data.ok === -1){
			alert(response.data.msg);
			return new Promise(()=>{})
        }
		return response.data;
    })
	document.querySelector(".inputs").onclick = async function () {
		// trim()：移除左右两侧空格
		const context = contextArea.value.trim();
		if(context){
			const {ok,msg} = await axios.post("/weibo",{
				context
			});
			console.log(ok,msg);
			contextArea.value = null;
			getWeibo();
        }else{
			alert("请输入微博内容！")
        }

	}
	// 获取微博
    const getWeibo = async function(pageNo=1){
		const {contextList,pageSum,pageNo:pageNoS} = await axios.get("/weibo",{
			params:{
				pageNo,
                pageSize:4
            }
        });
		let pageInfo = "";
		for(let i=1;i<pageSum;i++) {
			pageInfo += `<a onclick="getWeibo(${i})" href="javascript:;" class="${pageNoS===i?'active':''}">${i}</a>`;
		}
		document.querySelector(".commentOn").innerHTML = (`
            <div class="noContent" style="display:${contextList.length===0?'block':'none'}">暂无留言</div>
            <div class="messList">
                ${contextList.map(item=>(`
                     <div class="reply">
                        <p class="replyContent">${item.context}</p>
                        <p class="operation">
                            <span class="replyTime">${item.addTime}</span>
                            <span class="handle">
                                <a href="javascript:;" class="top">${item.topNum}</a>
                                <a href="javascript:;" class="down_icon">${item.downNum}</a>
                                <a href="javascript:;" class="cut">删除</a>
                            </span>
                        </p>
                    </div>
                `)).join("")}

            </div>
            <div class="page">
                ${pageInfo}
            </div>
		`)
    }
	getWeibo();
</script>
</html>
